<!--管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="学校名称:">
        <el-input v-model="searchKey.schoolname" clearable placeholder="请输入学校名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="年级名称:">
        <el-input v-model="searchKey.gradename" clearable placeholder="请输入年级名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="班级名称:">
        <el-input v-model="searchKey.classname" clearable placeholder="请输入班级名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table ref="table" :data="searchData" v-loading="page.tableLoading" center stripe border>
        <el-table-column prop="schoolid" label="学校编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="schoolname" label="学校名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="gradeid" label="年级编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="gradename" label="年级名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="classid" label="班级编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="classname" label="班级名称" header-align="center" align="center" show-overflow-tooltip />
        <!-- <el-table-column prop="status" label="状态" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.status==1?'启用':'禁用'}}
            </template>
        </el-table-column> -->
        <el-table-column prop="ownerteacherid" label="班主任编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="ownerteachername" label="班主任姓名" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button type="success" size="small" round  @click="editInfo(props.row)">修 改</el-button>
            <el-button type="danger" size="small" round  @click="delInfo(props.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog :title="!addModel.item.classid ? '新增' : '修改'" :visible.sync="addModel.flag" width="750px" :close-on-click-modal="false">
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display:flex;">
          <el-form-item label="学校名称:" required>
            <el-select v-model="addModel.item.schoolid" filterable  placeholder="请选择学校名称" @change="schoolChange(addModel.item.schoolid)" :disabled="addModel.item.classid?true:false">
              <el-option
                v-for="item in schoolList"
                :key="item.schoolid"
                :label="item.schoolname"
                :value="item.schoolid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级名称:" required>
            <el-select v-model="addModel.item.gradeid" filterable   placeholder="请选择年级名称" @change="gradeChange(addModel.item.gradeid)" :disabled="addModel.item.classid?true:false">
              <el-option
                v-for="item in gradeList"
                :key="item.gradeid"
                :label="item.gradename"
                :value="item.gradeid">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="年级名称:" required>
            <el-input v-model="addModel.item.gradename" placeholder="请输入年级名称" />
          </el-form-item> -->
        </div>
        <div style="display:flex;">
          <el-form-item label="排序号:" required>
            <el-input-number v-model="addModel.item.seq" type="input" placeholder="请输入排序号" />
          </el-form-item>
          <el-form-item label="班级名称:" required>
            <el-input v-model="addModel.item.classname" type="input" placeholder="请输入班级名称" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="班主任编码:" required>
            <el-input v-model="addModel.item.ownerteacherid" type="input" placeholder="请输入班主任编码" />
          </el-form-item>
          <el-form-item label="班主任姓名:" required>
            <el-input v-model="addModel.item.ownerteachername" type="input" placeholder="请输入联系方式" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

//
import {
  getschoollist,
  getgradelist,
  getclasslist,
  addclass,
  editclass,
  delclass
} from '@/api/educationalManagement/index'
import Pagination from '@/components/Pagination' // 分页
const defaultAddItem = {
  schoolid:'',
  schoolname: '',
  gradeid:'',
  gradename: '',
  classid: '',
  classname: '',
  seq:1,
  ownerteacherid: '',
  ownerteachername: ''
}
export default {
  name: 'AgentManagement',
  components: { Pagination },
  data() {
    return {
      searchKey: {
        schoolname: '',
        gradename: '',
        classname: '',
      },
      schoolList: [],
      gradeList: [],
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0 // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem
      }
    }
  },
  mounted() {
    this.onsearch()
    this.getSchoolList()
  },
  methods: {
    schoolChange(val){
      this.schoolList.forEach(element => {
        if (element.schoolid==val) {
          this.addModel.item.schoolname = element.schoolname
        }
      });
      this.addModel.item.gradeid = ''
      this.addModel.item.gradename = ''
      this.gradeList= []
      this.getGradeList(this.addModel.item.schoolname)
    },
    getSchoolList(){
      var params = {}
      var that = this
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      getschoollist(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.schoolList = res.data.data.datalist
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          })
    },
    getGradeList(gradename){
      var params = {}
      var that = this
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      params.gradename = gradename
       getgradelist(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.gradeList = res.data.data.datalist
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          })
    },
    gradeChange(val){
      this.gradeList.forEach(element => {
        if (element.gradeid==val) {
          this.addModel.item.gradename = element.gradename
        }
      });
    },
    addChange() {
      this.addModel.item = Object.assign({}, defaultAddItem)
      this.addModel.flag = true
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row)
      this.addModel.flag = true
    },
    submitArea() {
      var that = this
      var params = {}
      if (that.addModel.item.classid) {
        params.classid = that.addModel.item.classid
      }
      // params.schoolid = that.addModel.item.schoolid
      params.schoolname = that.addModel.item.schoolname
      params.gradeid = that.addModel.item.gradeid
      params.gradename = that.addModel.item.gradename
      params.classname = that.addModel.item.classname
      params.seq = that.addModel.item.seq
      params.ownerteacherid = Number(that.addModel.item.ownerteacherid)
      params.ownerteachername = that.addModel.item.ownerteachername
      console.log(params);
      if(!params.schoolname){
        this.$message({
          type: 'warning',
          message: '学校名称不能为空！'
        })
        return false
      }
      if(!params.gradename){
        this.$message({
          type: 'warning',
          message: '年级名称不能为空！'
        })
        return false
      }
      if(!params.classname){
        this.$message({
          type: 'warning',
          message: '班级名称不能为空！'
        })
        return false
      }
      if(!params.ownerteachername){
        this.$message({
          type: 'warning',
          message: '班主任姓名不能为空！'
        })
        return false
      }
      var loginInit = that.$loading()
      if (params.classid) {
        editclass(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '修改成功！'
              })
            }else{
              that.$message({
                type: 'error',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      } else {
        addclass(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '新增成功！'
              })
            }else{
              that.$message({
                type: 'error',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm('确定要删除此条记录吗？删除后不可恢复！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {}
        var that = this
        params.schoolid = item.schoolid
        params.classid = item.classid
        delclass(params).then(res => {
          if (res.data.code == 0) {
            that.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          that.onsearch()
        }).catch(error => [
          that.$message({
            type: 'warning',
            message: '删除失败'
          })
        ])
      })
    },
    onsearch() {
      this.page.currentPage = 1
      this.onSubmit()
    },
    onSubmit() {
      var params = {}
      var that = this
      params.pageindex = that.page.currentPage // 当前页数
      params.pagesize = that.page.pageSize // 每页展示条数
      params.schoolname = that.searchKey.schoolname
      params.gradename = that.searchKey.gradename
      params.classname = that.searchKey.classname
      that.page.tableLoading = true
      getclasslist(params)
        .then((res) => {
          that.page.tableLoading = false
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist
            that.page.totalRow = res.data.data.totalcount
          }else{
            that.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
        .catch(() => {
          that.page.tableLoading = false
        })
    }

  }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}
.el-table .el-button {
    display: inline-block;
    margin: 0 10px;
}
.el-select{
  width: 200px;
}
</style>
